<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>水波纹</title>
    <script src="../wh2114/vuedemo/lib/vue.js"></script>
    <link rel="stylesheet" href="..wh2114/vuedemo/lib/animate.css" />
    <style>
      .btn {
        height: 48px;
        padding: 0 15px;
        border-radius: 8px;
        text-align: center;
        background: orange;
        color: #fff;
        font-size: 20px;
        outline: none;
        border: none;
        cursor: pointer;
        position: relative;
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <h2>水波纹指令</h2>
      <button class="btn" v-shuibowen="bg1">立即登录</button>
      <button class="btn" v-shuibowen="bg2">马上注册</button>
    </div>
    <script>
      Vue.directive("shuibowen", {
        bind(el, binding) {
          el.addEventListener(
            "click",
            function (e) {
              console.log("click");
              var e = e || window.event;
              var clientX = e.clientX;
              var clientY = e.clientY;

              var left = el.offsetLeft;
              var top = el.offsetTop;

              var x = clientX - left;
              var y = clientY - top;

              console.log(x, y);
              var span = document.createElement("span");
              span.style.position = "absolute";
              span.style.background = binding.value || "rgba(0,0,0,0.5)";
              span.style.opacity = 1;
              span.style.borderRadius = "50%";

              el.append(span);
              var width = 0;
              var height = 0;
              var opacity = 1;

              var timer = setInterval(() => {
                width += 5;
                height += 5;
                opacity -= 0.03;
                if (opacity > 0) {
                  span.style.width = width + "px";
                  span.style.height = height + "px";
                  span.style.opacity = opacity;
                  span.style.left = x - span.clientWidth / 2 + "px";
                  span.style.top = y - span.clientHeight / 2 + "px";
                } else {
                  clearInterval(timer);
                  timer = null;
                  span.remove();
                }
              }, 20);
            },
            false
          );
        },
        inserted(el, binding) {},
      });

      const vm = new Vue({
        el: "#app",
        data: {
          bg1: "rgba(0,0,0,0.1)",
          bg2: "blue",
        },
      });
    </script>
  </body>
</html>
